<!-- 筛选组件 -->
<template>
	<div class="xdc-filters">
		<el-select
			v-for="key in Object.keys(data)"
			:key="key"
			v-model="data[key].value"
			filterable
			class="xdc-filter"
			clearable
			:placeholder="data[key].placeholder"
			remote
			:loading="data[key].loading"
			:remote-method="data[key].query"
			@change="onSelect"
			@clear="onSelect"
		>
			<el-option
				v-for="item in data[key].options"
				:key="item[data[key].valueField]"
				:label="item[data[key].textField]"
				:value="item[data[key].valueField]"
			/>
		</el-select>
	</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';

/**
 * 数据
 */
export interface XdcFilterData<T> {
	[prop: string]: {
		placeholder: string;
		options: XdcFilterOption<T>[];
		value: T;
		textField: string;
		valueField: string;
		loading: boolean;
		query: (str: string) => void;
	};
}

/**
 * 下拉选项
 */
export interface XdcFilterOption<T> {
	[prop: string]: string | T;
}

const props = defineProps({
	data: {
		type: Object,
	},
});

const emits = defineEmits(['filter']);

const onSelect = () => {
	const selecteds = {};
	Object.entries(props.data).forEach(([key, filter]) => {
		if (filter.value != null && filter.value !== '') {
			selecteds[key] = {
				fieldName: key,
				fieldValue: filter.value,
			};
		}
	});
	emits('filter', selecteds);
};
</script>
<style lang="scss">
.xdc-filters {
	padding: 15px 0;
}
.xdc-filter {
	margin-right: 15px;
}
</style>
